/*
 * @Author: hanyu 
 * @Date: 2018-05-10 11:06:03 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-17 09:21:35
 */
<template>
	<bg-lay-out>
       <div slot="headerText">房联行数据中心</div>
      <sel-time slot="headerMain" :cityId="selTimeCityId" style="text-align:center;margin-top: 29px;" val="3" @onChangeTime="onChangeTime" :storeId="storeId"></sel-time>
          <div slot="main">
                <el-row type="flex">
                    <div class="topLeftCon">
                        <el-row type="flex" align="center"  style="padding:60px 78px;flex-wrap: wrap;">
                          <div v-for="(item,id) in topLeftData" :key="id" class="topLeftItem">
                            <div class="itemTop">
                              <img class="itemTopIcon" :src="'../../../../../static/img/flh/'+ item.url" >
                              <div style="font-size:20px;margin-left:10px">{{item.name}}</div>
                            </div>
                            <b class="boldFont itemNum">
                              <i-count-up
                                :startVal="startVal"
                                :endVal="item.val"
                                :decimals="decimals"
                                :duration="duration"
                                :options="options"/>
                            </b>
                          </div>
                        </el-row>
                    </div>
                    <div class="topLeftCon" style="margin-left:20px">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
                          <chart-lay-out :showLine="false">
                            <span slot="title" :style="'margin-top:0;font-size:20px;line-height:initial;'" >户型成交类型统计</span>
                            <bar-charts slot="main" v-model="transactionStatisticArr"></bar-charts>
                          </chart-lay-out>
                        </el-col>
                    </div>
            </el-row>
            <el-row class="marginBot-30" type="flex">
              <div class="midCon">
                <el-row type="flex"  justify="space-between" style="width:100%">
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                    <chart-lay-out>
                      <span slot="title">房源状态分析</span>
                      <pie-chart slot="main" v-model="housingConditionArr"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                    <chart-lay-out>
                      <span slot="title">房源户型统计</span>
                      <pie-chart slot="main" v-model="housingFamilyArr"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                   <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                     <chart-lay-out>
                       <span slot="title">客源分析</span>
                       <pie-chart slot="main" v-model="passengerSourceArr"></pie-chart>
                     </chart-lay-out>
                  </el-col>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                    <chart-lay-out :showLine="false">
                      <span slot="title">用户购置需求</span>
                      <bar-chart slot="main" v-model="houseAmountArr"></bar-chart>
                    </chart-lay-out>
                  </el-col>
                </el-row>
                <div class="lineCon">
                   <div class="lineImg"></div>
                </div>
                <el-row type="flex"  justify="space-between" style="width:100%">
                  <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
                    <chart-lay-out>
                      <span slot="title">门店成交收入</span>
                      <pie-chart slot="main" v-model="propertiesAnalysisArr" :option="propertiesAnalysisOption"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
                    <chart-lay-out>
                      <span slot="title">门店任务完成情况</span>
                      <bar-charts slot="main" v-model="houseFamilyArr" :option="houserFamilOption"></bar-charts>
                    </chart-lay-out>
                  </el-col>
                  <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
                      <chart-lay-out :showLine="false">
                        <span slot="title">房源/客源来源</span>
                        <pie-chart slot="main" v-model="storeTaskArr"></pie-chart>
                      </chart-lay-out>
                      <div class="bottomSelBtn absTopRig-20">
                        <div :class="storesIncome ? 'storeActive':'storeUnActive'" @click="onSourceHouse('0')" >
                          <el-button size="mini" round>按房源</el-button>
                        </div>
                        <div :class="storesIncome ? 'storeUnActive':'storeActive'" @click="onSourceHouse('1')" >
                          <el-button size="mini" round>按客源</el-button>
                        </div>
                      </div>
                  </el-col>
                </el-row>
              </div>
            </el-row>
          </div>
	</bg-lay-out>
</template>
<script>
import chartLayOut from "@/components/Charts/chartLayOut";
import chart from "../../../../components/Charts/newChart";
import ICountUp from "vue-countup-v2";
import { getTokenName } from "@/utils/auth";
import conditionChart from "@/components/flh/conditionChart.vue";
import {
  GetDataProfileInfo, // 数据基础情况
  GetDataByDoubleTargetForTwo, // 双向指标统计
  GetDataByTargetForTwo // 单项指标统计
} from "@/api/flh/home";
import selTime from "@/components/flh/selTime";
import bgLayOut from "@/components/bgLayOut/index";
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import barCharts from "@/components/Charts/barCharts";
import lineChart from "@/components/Charts/lineChart";
export default {
  name: "propertiesAnalysis",
  components: {
    chart,
    conditionChart,
    selTime,
    ICountUp,
    bgLayOut,
    pieChart,
    barChart,
    barCharts,
    lineChart,
    chartLayOut
  },
  computed: {
    tokenName() {
      return getTokenName();
    }
  },
  data() {
    return {
      selTimeCityId: this.$route.query.cityId,
      cityId: 0,
      storesIncome: true, // 选中状态
      topLeftData: [
        {
          url: "flh-house.png",
          name: "房源 (套)",
          val: 0
        },
        {
          url: "flh-mans.png",
          name: "客源 (位)",
          val: 0
        },
        {
          url: "flh-dealSucess.png",
          name: "成交 (套)",
          val: 0
        },
        {
          url: "flh-money.png",
          name: "收入 (元)",
          val: 0
        },
        {
          url: "flh-man.png",
          name: "门店经纪人 (位)",
          val: 0
        }
      ],

      storeId: "",
      storeTaskArr: [], // 房源、客源
      transactionStatisticArr: [], // 户型成交类型统计
      screenObj: {}, // 全局数据
      housingConditionArr: [], // 房源状态的统计
      housingFamilyArr: [], // 房源户型统计
      passengerSourceArr: [], // 客源分析
      houseAmountArr: [], // 房源量图表
      regionalHouseOption: {}, // 区域房源分布
      typeHouseOption: {}, // 门店成交收入
      houseFamilyArr: [], // 门店任务完成情况
      houserFamilOption: {
        labelDefault: 0
      },
      propertiesAnalysisArr: [], // 门店成交收入
      propertiesAnalysisOption: {
        tooltip: {
          position: function(pos, params, dom, rect, size) {
            //  鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = { top: 60 };
            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            return obj;
          }
        }
      },
      sourceHouseOption: {}, // 房源来源分析
      startTime: "",
      endTime: "",
      params: {}
    };
  },
  mounted() {
    this.storeId = this.$route.query.storeId;
  },
  methods: {
    formatterPieTwo(res, params, unit) {
      var minResult = "";
      if (res[0].list) {
        res[params.dataIndex].list.forEach((item, id) => {
          var minItem =
            "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
            item.name +
            "</span><span style='margin-top:2px;font-size:20px;font-family:DIN Condensed Bold'>" +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var val = params.data.value;
      var imgConStart =
        "<div style='display:flex;padding:12pt 12pt 12pt 12pt;color:" +
        params.color +
        ";flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;'>" +
        "<span style='width:100%;font-size:30px;font-family:DIN Condensed Bold'>" +
        val +
        "</span>" +
        "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px'>";

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    setOption(optionName, res, right, isSolid, moreData) {
      var xData = [];
      var unit = "人";
      var seriesObj = {
        type: "pie",
        radius: isSolid ? ["0%", "80%"] : ["50%", "60%"],
        center: ["40%", "50%"],
        roseType: isSolid && true,
        label: {
          show: false,
          formatter: "{b} \n {d}%",
          fontSize: 20,
          position: "inside",
          color: "#fff",
          fontFamily: "DIN Condensed Bold"
        },
        data: []
      };
      res.forEach(item => {
        var xObj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        xObj.name = item.xData ? item.xData : item.name;
        xData.push(xObj);
        var obj = {};
        obj.name = item.xData ? item.xData : item.name;
        obj.value = item.value;
        seriesObj.data.push(obj);
      });
      var option = {
        tooltip: {
          trigger: "item",
          formatter: params => this.formatterPieTwo(res, params, unit)
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          position: "center",
          // bottom: 20,
          data: xData,
          right: right
        },
        series: [seriesObj]
      };
      if (moreData) {
        option.tooltip.position = function(pos, params, dom, rect, size) {
          //  鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
          var obj = { top: 60 };
          obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
          return obj;
        };
      }
      this[optionName] = option;
    },
    // 经纪人
    async fetchAreaPerson() {
      var params = {
        cityId: this.cityId,
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        queryType: "18002"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[4].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 门店数量
    async fetchStoreNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        queryType: "18001"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.storeNum = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 合计收入
    async fetchSumIncome() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        queryType: "18006"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[3].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 成交量
    async fetchVolume() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        queryType: "18005"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[2].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 客源量
    async fetchCustomerNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        queryType: "18004"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[1].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 房源量
    async fetchHouseNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        queryType: "18003"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[0].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 房源/客源分析
    onSourceHouse(res) {
      this.storesIncome = !this.storesIncome;
      this.fetchStoreTask(res);
    },
    // 房源、客源
    async fetchStoreTask(id) {
      var params = {
        cityId: this.cityId,
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: id === "0" ? "18009" : "18015"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "storeTaskArr", resData.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 户型成交类型统计
    async fetchTransactionStatistic() {
      var params = {
        cityId: this.cityId,
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: "18018"
      };
      try {
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "transactionStatisticArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 门店成交收入
    async fetchpropertiesAnalysisArr() {
      var params = {
        cityId: this.cityId,
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: "18025"
      };
      try {
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "propertiesAnalysisArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 门店任务完成情况
    async fetchHouseFamily() {
      //  var self = this;
      //  var params ={
      //         districtId:this.screenObj.area.id,
      //          storeId: this.screenObj.store.id,
      //          startTime: this.screenObj.gTime[0],
      //          endTime:this.screenObj.gTime[1],
      //          queryType: "18029"
      //      }
      //  try {
      //    var res = await GetDataByTargetForTwo(params);
      //    if (res.data.code === "0") {
      //      var resData = res.data.result;
      //      this.initHouseFamilyChart(resData);
      //    }
      //  } catch (e) {
      //    console.log(e);
      //  }
      this.initHouseFamilyChart();
    },
    initHouseFamilyChart() {
      var res = [
        {
          name: "交易任务(套)",
          value: 10,
          list: [{ name: "计划任务", value: 5 }, { name: "实际完成", value: 5 }]
        },
        {
          name: "客源任务(次)",
          value: 100,
          list: [{ name: "计划任务", value: 5 }, { name: "实际完成", value: 5 }]
        },
        {
          name: "话务任务(次)",
          value: 200,
          list: [
            { name: "计划任务", value: 50 },
            { name: "实际完成", value: 150 }
          ]
        }
      ];
      this.$set(this, "houseFamilyArr", res);
    },
    // 客源分析
    async fetchPassengerSource() {
      try {
        var params = {
          cityId: this.cityId,
          districtId: this.screenObj.area.id,
          storeId: this.screenObj.store.id,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "18004"
        };
        var res = await GetDataProfileInfo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "passengerSourceArr", resData.targetDetailList);
        }
      } catch (e) {
        console.log(e);
      }
    },

    // 房源户型统计
    async fetchHousingFamily() {
      try {
        var params = {
          cityId: this.cityId,
          districtId: this.screenObj.area.id,
          storeId: this.screenObj.store.id,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "18003"
        };
        var res = await GetDataProfileInfo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "housingFamilyArr", resData.targetDetailList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 改变时间
    onChangeTime(res) {
      $(".bg4Con").scrollTop(0);
      // if (!this.$route.query.cityId) {
      this.selTimeCityId = res.cityId;
      // }
      this.cityId = res.cityId;
      this.screenObj = res;
      this.params = {
        districtId: res.area.id,
        storeId: res.store.id,
        startTime: res.gTime[0],
        endTime: res.gTime[1],
        queryType: ""
      };
      this.fetchData();
    },
    // 用户购置需求
    async fetchHouseAmount() {
      var params = {
        cityId: this.cityId,
        districtId: this.screenObj.area.id,
        storeId: this.screenObj.store.id,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: "18029"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "houseAmountArr", resData.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 房源状态数据

    async fetchHousingConditionChart() {
      try {
        var params = {
          queryType: "18012",
          cityId: this.cityId
        };
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "housingConditionArr", resData.list);
          // this.setOption("housingConditionArr", resData.list, "5%");
        }
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    forEachFun(initData) {
      // 处理数据生成Option
      var option = this.$utils.returnItemSeries(initData);
      this.$set(this, initData.returnOption, option);
      var self = this;
      setTimeout(function() {
        if (self.$refs[initData.refName][0]) {
          self.$refs[initData.refName][0].initChart();
        } else {
          self.$refs[initData.refName].initChart();
        }
      }, 0);
    },
    setDataTime(name, num) {
      this[name].startTime = this.$store.getters.gTime[0];
      this[name].endTime = this.$store.getters.gTime[1];
      if (num) {
        this[name].queryType = num;
      }
    },
    // 获取数据
    fetchData() {
      this.fetchAreaPerson(); // 经纪人数量
      this.fetchStoreNum(); // 门店数量
      this.fetchSumIncome(); // 收入
      this.fetchVolume(); // 成交量
      this.fetchCustomerNum(); // 客源量
      this.fetchHouseNum(); // 房源量
      // 客源分析
      this.fetchPassengerSource();
      // 房源户型统计
      this.fetchHousingFamily();
      // 房源状态统计
      this.fetchHousingConditionChart();
      // 房源基础数据
      this.fetchHouseAmount();

      // 门店任务完成情况
      this.fetchHouseFamily();
      // 门店成交收入
      this.fetchpropertiesAnalysisArr();
      // 户型成交类型统计
      this.fetchTransactionStatistic();
      // 房源、客源
      this.fetchStoreTask("0");
    },
    // 跳页面
    pushPage(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import "../main.css";
@import "../../../../styles/base/_parameters";

.marginBot-30 {
  margin-bottom: 30px;
}
.bottomSelBtn {
  @include flex-dr-ic-js;
  margin-right: 10px;
}
.bottomSelBtn .storeUnActive .el-button {
  background: transparent;
  border: 0;
  color: #00d1ff;
}
.bottomSelBtn .storeActive .el-button {
  background: #00d1ff;
  border: 1px solid #00d1ff;
  color: black;
}
.topLeftItem .itemTop {
  @include flex-dr-ic-js;
  color: #2ff0d2;
}
.topLeftItem .itemTopIcon {
  width: 20px;
  height: 21px;
}
.topLeftCon .itemNum {
  position: absolute;
  top: 35px;
  left: 30px;
}
.topLeftItem {
  @include flex-dc-js;
  position: relative;
  height: 92px;
  margin-top: 45px; /* 38px => 45px */
  margin-left: 106px;
}
.topLeftItem:first-child {
  margin-left: 0px;
}
.topLeftItem:nth-child(4) {
  margin-left: 0px;
}
.lineImg {
  width: 1712px;
  height: 8px;
  color: #2ff0d2;
  @include bgImg(minLine);
}
.lineCon {
  @include flex-jc;
  width: 100%;
  text-align: center;
}
.chartLine {
  width: 1px;
  height: 332px;
  background: rgba(#31cee6, 0.2);
  position: absolute;
  right: 0;
  top: 10%;
}
.minTopLeftCon {
  position: relative;
  /* margin-top: 10px; */
}
.midCon {
  @include flex-dc;
  width: 100%;
  /* height: 792px; */
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x792);
}
.topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
.topLeftCon span {
  font-size: 50px;
  line-height: 60px;
  /* margin-left: 22pt; */
  margin-top: 2px;
}
.topLeftCon {
  @include flex-dc;
  width: 788px;
  /* height: 393px; */
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_890x393);
}
.topLeftCon:nth-of-type(2) {
  width: 1010px;
}
/* topNav  --start */
.active {
  font-weight: bold;
}
.topNavBar {
  @include flex-ic-jc;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
}
/* topNav  --end */
.itemTop {
  width: 100%;
  padding: 5px 0;
  color: white;
  text-align: center;
}
</style>
